<!DOCTYPE html>
<!--
 *  Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
 *
 *  Use of this source code is governed by a BSD-style license
 *  that can be found in the LICENSE file in the root of the source
 *  tree.
-->
<html>
<head>

    <meta charset="utf-8">
    <meta name="description" content="WebRTC Javascript code samples">
    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
    <meta itemprop="description" content="Client-side WebRTC code samples">
    <meta itemprop="image" content="src/images/webrtc-icon-192x192.png">
    <meta itemprop="name" content="WebRTC code samples">
    <meta name="mobile-web-app-capable" content="yes">
    <meta id="theme-color" name="theme-color" content="#ffffff">

    <base target="_blank">

    <title>WebRTC samples</title>

    <link rel="icon" sizes="192x192" href="src/images/webrtc-icon-192x192.png">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="src/css/main.css"/>

    <style>
        h2 {
            font-size: 1.5em;
            font-weight: 500;
        }

        h3 {
            border-top: none;
        }

        section {
            border-bottom: 1px solid #eee;
            margin: 0 0 1.5em 0;
            padding: 0 0 1.5em 0;
        }

        section:last-child {
            border-bottom: none;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
<div id="container">

    <h1>WebRTC samples</h1>

    <section>

        <p>
            This is a collection of small samples demonstrating various parts of the <a
                href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API">WebRTC APIs</a>. The code for all
            samples are available in the <a href="https://github.com/webrtc/samples">GitHub repository</a>.
        </p>

        <p>Most of the samples use <a href="https://github.com/webrtc/adapter">adapter.js</a>, a shim to insulate apps
            from spec changes and prefix differences.</p>

        <p><a href="https://webrtc.org/getting-started/testing" title="Command-line flags for WebRTC testing">https://webrtc.org/getting-started/testing</a>
            lists command line flags useful for development and testing with Chrome.</p>

        <p>Patches and issues welcome! See <a href="https://github.com/webrtc/samples/blob/gh-pages/CONTRIBUTING.md">CONTRIBUTING.md</a>
            for instructions.</p>

        <p class="warning"><strong>Warning:</strong> It is highly recommended to use headphones when testing these
            samples, as it will otherwise risk loud audio feedback on your system.</p>
    </section>

    <section>

        <h2 id="getusermedia"><a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia">getUserMedia():</a>
        </h2>
        <p class="description">Access media devices</p>
        <ul>
            <li><a href="src/content/getusermedia/gum/index.html">Basic getUserMedia demo</a></li>

            <li><a href="src/content/getusermedia/canvas/index.html">Use getUserMedia with canvas</a></li>

            <li><a href="src/content/getusermedia/filter/index.html">Use getUserMedia with canvas and CSS filters</a></li>

            <li><a href="src/content/getusermedia/resolution/index.html">Choose camera resolution</a></li>

            <li><a href="src/content/getusermedia/audio/index.html">Audio-only getUserMedia() output to local audio element</a>
            </li>

            <li><a href="src/content/getusermedia/volume/index.html">Audio-only getUserMedia() displaying volume</a></li>

            <li><a href="src/content/getusermedia/record/index.html">Record stream</a></li>

            <li><a href="src/content/getusermedia/getdisplaymedia/index.html">Screensharing with getDisplayMedia</a></li>

            <li><a href="src/content/getusermedia/pan-tilt-zoom/index.html">Control camera pan, tilt, and zoom</a></li>
			
            <li><a href="src/content/getusermedia/exposure/index.html">Control exposure</a></li>
        </ul>
        <h2 id="devices">Devices:</h2>
        <p class="description">Query media devices</p>
        <ul>
            <li><a href="src/content/devices/input-output/index.html">Choose camera, microphone and speaker</a></li>

            <li><a href="src/content/devices/multi/index.html">Choose media source and audio output</a></li>
        </ul>

        <h2 id="capture">Stream capture:</h2>
        <p class="description">Stream from canvas or video elements</p>
        <ul>

            <li><a href="src/content/capture/video-video/index.html">Stream from a video element to a video element</a></li>

            <li><a href="src/content/capture/video-pc/index.html">Stream from a video element to a peer connection</a></li>

            <li><a href="src/content/capture/canvas-video/index.html">Stream from a canvas element to a video element</a></li>

            <li><a href="src/content/capture/canvas-pc/index.html">Stream from a canvas element to a peer connection</a></li>

            <li><a href="src/content/capture/canvas-record/index.html">Record a stream from a canvas element</a></li>

            <li><a href="src/content/capture/video-contenthint/index.html">Guiding video encoding with content hints</a></li>
        </ul>

        <h2 id="peerconnection"><a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection">RTCPeerConnection:</a>
        </h2>
        <p class="description">Controlling peer connectivity</p>
        <ul>
            <li><a href="src/content/peerconnection/pc1/index.html">Basic peer connection demo in a single tab</a></li>

            <li><a href="src/content/peerconnection/channel/index.html">Basic peer connection demo between two tabs</a></li>

            <li><a href="src/content/peerconnection/perfect-negotiation/index.html">Peer connection using Perfect Negotiation</a></li>

            <li><a href="src/content/peerconnection/audio/index.html">Audio-only peer connection demo</a></li>

            <li><a href="src/content/peerconnection/bandwidth/index.html">Change bandwidth on the fly</a></li>

            <li><a href="src/content/peerconnection/change-codecs/index.html">Change codecs before the call</a></li>

            <li><a href="src/content/peerconnection/upgrade/index.html">Upgrade a call and turn video on</a></li>

            <li><a href="src/content/peerconnection/multiple/index.html">Multiple peer connections at once</a></li>

            <li><a href="src/content/peerconnection/multiple-relay/index.html">Forward the output of one PC into another</a></li>

            <li><a href="src/content/peerconnection/munge-sdp/index.html">Munge SDP parameters</a></li>

            <li><a href="src/content/peerconnection/pr-answer/index.html">Use pranswer when setting up a peer connection</a></li>

            <li><a href="src/content/peerconnection/constraints/index.html">Constraints and stats</a></li>

            <li><a href="src/content/peerconnection/old-new-stats/index.html">More constraints and stats</a></li>

            <li><a href="src/content/peerconnection/per-frame-callback/index.html">RTCPeerConnection and requestVideoFrameCallback()</a></li>

            <li><a href="src/content/peerconnection/create-offer/index.html">Display createOffer output for various scenarios</a>
            </li>

            <li><a href="src/content/peerconnection/dtmf/index.html">Use RTCDTMFSender</a></li>

            <li><a href="src/content/peerconnection/states/index.html">Display peer connection states</a></li>

            <li><a href="src/content/peerconnection/trickle-ice/index.html">ICE candidate gathering from STUN/TURN servers</a>
            </li>

            <li><a href="src/content/peerconnection/restart-ice/index.html">Do an ICE restart</a></li>

            <li><a href="src/content/peerconnection/webaudio-input/index.html">Web Audio output as input to peer connection</a>
            </li>

            <li><a href="src/content/peerconnection/webaudio-output/index.html">Peer connection as input to Web Audio</a></li>
            <li><a href="src/content/peerconnection/negotiate-timing/index.html">Measure how long renegotiation takes</a></li>
            <li><a href="src/content/extensions/svc/index.html">Choose scalablilityMode before call - Scalable Video Coding (SVC) Extension </a></li>
        </ul>
        <h2 id="datachannel"><a
                href="https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel">RTCDataChannel:</a></h2>
        <p class="description">Send arbitrary data over peer connections</p>
        <ul>
            <li><a href="src/content/datachannel/basic/index.html">Transmit text</a></li>

            <li><a href="src/content/datachannel/filetransfer/index.html">Transfer a file</a></li>

            <li><a href="src/content/datachannel/datatransfer/index.html">Transfer data</a></li>

            <li><a href="src/content/datachannel/messaging/index.html">Messaging</a></li>
        </ul>

        <h2 id="videoChat">Video chat:</h2>
        <p class="description">Full featured WebRTC application</p>
        <ul>

            <li><a href="https://github.com/webrtc/apprtc/">AppRTC video chat client</a> that you can run out of a Docker image</li>

        </ul>

        <h2 id="capture">Insertable Streams:</h2>
        <p class="description">API for processing media</p>
        <ul>
            <li><a href="src/content/insertable-streams/endtoend-encryption">End to end encryption using WebRTC Insertable Streams</a></li> (Experimental)
            <li><a href="src/content/insertable-streams/video-analyzer">Video analyzer using WebRTC Insertable Streams</a></li> (Experimental)
            <li><a href="src/content/insertable-streams/video-processing">Video processing using MediaStream Insertable Streams</a></li> (Experimental)
            <li><a href="src/content/insertable-streams/audio-processing">Audio processing using MediaStream Insertable Streams</a></li> (Experimental)
            <li><a href="src/content/insertable-streams/video-crop">Video cropping using MediaStream Insertable Streams in a Worker</a></li> (Experimental)
            <li><a href="src/content/insertable-streams/webgpu">Integrations with WebGPU for custom video rendering:</a></li> (Experimental)
        </ul>   

    </section>

</div>

<script src="src/js/lib/ga.js"></script>

</body>
</html>
